<template>
<div>
    <div class="baseInfoBox">
        <div class="imgBox">
            <Image style="width: 100%;height: 100%;" :url="`${urlImage}/lngis/farm/common/static/${detail.farmLandPic}`" alt=""/> 
        </div>
        <div class="mainCon">
            <div class="title">
                <div class="name" v-if="detail.cropName">{{detail.cropName }}, {{ detail.cropSeriesName}}</div>
                <div class="name" v-else>--</div>
            </div>
            <div class="title" style="padding-top:20px;" v-if="detail.cropName">
                <div class="time"><img src="/src/assets/sz.png" alt=""/> {{formatDate(detail.createTime)}}</div>
                <div class="qk" style="color: #FF9C00;">{{detail.cropName?'播种':'--'}}</div>
            </div>
        </div>
        </div>
        <ul class="infoList">
                <li>
                    <label>地块名称：</label>
                    <p>{{detail.farmLandName||'--'}}</p>
                </li>
                <li>
                    <label>地块分组：</label>
                    <p>{{detail.groupName||'--'}}</p>
                </li>
                <li>
                    <label>地块类型：</label>
                    <p>{{detail.landTypeName||'--'}}</p>
                </li>
                <li>
                    <label>地块质地：</label>
                    <p>{{detail.geologyName||'--'}}</p>
                </li>
                <li>
                    <label>地块面积：</label>
                    <p>{{detail.mapAreaSize ||'--'}}(亩)</p>
                </li>
                <li>
                    <label>地块权属：</label>
                    <p>{{detail.landBelong||'--'}}</p>
                </li>
                <li>
                    <label>地块标签：</label>
                    <p>{{detail.tagName||'--'}}</p>
                </li>
                <!-- <li>
                    <label>经度：</label>
                    <p>{{detail.locationLongitude}}</p>
                </li>
                <li>
                    <label>纬度：</label>
                    <p>{{detail.locationLatitude}}</p>
                </li> -->
                <li>
                    <label>地块位置：</label>
                    <p>{{detail.locationAddress}}</p>
                </li>
                <li>
                    <label>创建人：</label>
                    <p>{{detail.userName||'--'}}</p>
                </li>
                <li>
                    <label>创建时间：</label>
                    <p>{{detail.createTime||'--'}}</p>
                </li>
            </ul>
</div>
</template>

<script setup>
import {ref} from "vue"
import {formatDate} from '@/utils/format.js'
import Image from '@/components/custom/image.vue'

const urlImage = ref(import.meta.env.VITE_BASE_PATH)
const props = defineProps({
    detail:{
        type:Object,
        default:{}
    }
})
</script>

<style lang="scss" scoped>
.baseInfoBox{
    display: flex;
    font-family: PingFangSC, PingFang SC;
    color: #333333;
    .imgBox{
        height: 70px;
        width: 70px;
        background-color: #eee;
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: left top;
        flex-shrink: 0;
        border-radius: 70px;
    }
    .mainCon{
        flex: 1;
        flex-shrink: 0;
        padding: 0 0 0 13px;
        .title{
            display: flex;
            align-items: center;
            .name{
                font-size: 20px;
                font-weight: 600;
            }
            .time{
                display: flex;
                align-items: center;
                height: 18px;
                font-weight: 500;
                color: #666666;
                font-size: 14px;
                line-height: normal;
                img{
                    display: block;
                    height: 100%;
                    margin: 0 8px 0 0;
                }
            }
            .qk{
                height: 24px;
                line-height: 24px;
                padding: 0 10px;
                background: #FFF5E5;
                border-radius: 2px;
            }
        }
    }
}
.infoList{
    box-sizing: border-box;
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 10px 0 0 0;
    border-radius: 3px;
    padding:10px 0 10px 10px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #333333;
    display: flex;
    flex-wrap: wrap;
    &::after{
        content: "";
        display: block;
        height: 0;
        clear:both;
    }
    li{
        display: flex;
        float: left;
        line-height: normal;
        padding:0 0 12px 0;
        width:50%;
        label{
            display: flex;
            align-items: self-start;
            width: 85px;
            font-weight: 600;
            font-size: 14px;
            // &::before{
            //     content: '';
            //     display: block;
            //     height: 4px;
            //     width: 4px;
            //     line-height: 0;
            //     overflow: hidden;
            //     border-radius: 50%;
            //     background-color: #999999;
            //     margin: 10px 7px 0 0;
            // }
        }
        p{
            padding: 0;
            margin: 0;
            flex: 1;
            text-align: left;
            color: #999999;
            font-size: 14px;
        }
    }
}
</style>